<template>
  <div class="friend-wrap">
    <div class="friend-box" v-if="!$common.isEmpty($store.state.currentUser)">
      <div class="friend-aside">
        <div>
          <!-- 头像 -->
          <div>
            <n-avatar
              object-fit="cover"
              @click="changeAvatar(1)"
              class="user-thumb"
              :src="$store.state.currentUser.avatar"
            />
          </div>
          <!-- 聊天 -->
          <div
            id="chat"
            class="friend-chat aside-active"
            @click="isActive($event, 'aside-active', 1)"
          >
            <div>
              <svg viewBox="0 0 1024 1024" width="24" height="24">
                <path
                  d="M355.76 85.68A175.808 175.808 0 0 1 496 16c67.616 0 126.368 38.208 155.84 94.192a31.712 31.712 0 0 0 47.872 9.744C731.712 94.736 772.144 80 816 80c105.968 0 192 86.032 192 192s-86.032 192-192 192c-93.36 0-171.232-66.768-188.448-155.12a175.632 175.632 0 0 1-140.144 58.912C459.44 469.328 366.368 544 256 544 123.536 544 16 436.464 16 304S123.536 64 256 64c35.584 0 69.376 7.76 99.76 21.68z"
                  fill="#CBE9EA"
                ></path>
                <path
                  d="M16 400.8A128.864 128.864 0 0 1 144.8 272h734.4A128.864 128.864 0 0 1 1008 400.8v305.6a128.864 128.864 0 0 1-128.8 128.8h-161.6L809.6 1008 568.8 835.2H144.8A128.864 128.864 0 0 1 16 706.4v-305.6z"
                  fill="#FFD140"
                ></path>
                <path
                  d="M144.8 835.2c-21.408 0 459.952-30.704 678.288-44.56A112 112 0 0 0 928 678.864V412.064a144 144 0 0 0-42.688-102.32L847.2 272C918.288 272 1008 329.712 1008 400.8v305.6a128.864 128.864 0 0 1-128.8 128.8h-161.6L809.6 1008 568.8 835.2H144.8z"
                  fill="#D9B236"
                ></path>
                <path
                  d="M288 552m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
                  fill="#FFFFFF"
                ></path>
                <path
                  d="M288 552m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
                  fill="#FFFFFF"
                ></path>
                <path
                  d="M512 552m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
                  fill="#FFFFFF"
                ></path>
                <path
                  d="M736 552m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
                  fill="#FFFFFF"
                ></path>
                <path
                  d="M585.616 225.312A120.064 120.064 0 0 1 472 384a119.408 119.408 0 0 1-74.272-25.776A144.048 144.048 0 0 1 272 432c-79.472 0-144-64.528-144-144 0-26.224 7.024-50.832 19.296-72.016"
                  fill="#CBE9EA"
                ></path>
                <path
                  d="M585.616 225.312c3.264-12.4 6.384 25.152 6.384 38.688 0 66.224-53.776 120-120 120a119.408 119.408 0 0 1-74.272-25.776A144.048 144.048 0 0 1 272 432c-79.472 0-144-64.528-144-144 0-26.224 17.84-96.464 19.296-72.016 10.784 179.808 167.712 183.392 250.432 94.992 67.824 66.656 166.24-3.392 187.888-85.664z"
                  fill="#ADC6C7"
                ></path>
              </svg>
            </div>
            <div class="friend-text">咨询</div>
          </div>
          <!-- 好友 -->
          <div v-if="role == 1" class="friend-chat" @click="isActive($event, 'aside-active', 2)">
            <div>
              <svg viewBox="0 0 1024 1024" width="24" height="24">
                <path
                  d="M560.6 476.7c-76 0-137.9-61.9-137.9-137.9s61.9-137.9 137.9-137.9 137.9 61.9 137.9 137.9-61.8 137.9-137.9 137.9zM800 715.2"
                  fill="#62A8EA"
                ></path>
                <path
                  d="M801.6 715.5c9.2 0 16.6-7.5 16.6-16.6 0-34.5-6.8-68-20.2-99.6-12.9-30.5-31.3-57.9-54.9-81.3-23.5-23.5-50.9-42-81.3-54.9-31.6-13.4-65.1-20.2-99.6-20.2a16 16 0 0 0-3.9 0.5c-33.7 0.3-66.4 7.1-97.2 20.1-30.5 12.9-57.9 31.4-81.3 54.9-23.5 23.5-42 50.9-54.9 81.3-13.4 31.6-20.2 65.1-20.2 99.6 0 9.2 7.4 16.6 16.6 16.6 9.2 0.1 471.1-0.4 480.3-0.4z"
                  fill="#62A8EA"
                ></path>
                <path
                  d="M490.6 476.7c-76 0-137.9-61.9-137.9-137.9s61.9-137.9 137.9-137.9 137.9 61.9 137.9 137.9-61.8 137.9-137.9 137.9z m0-242.6c-57.7 0-104.6 47-104.6 104.6 0 57.7 46.9 104.7 104.6 104.7 57.7 0 104.6-47 104.6-104.6 0.1-57.7-46.8-104.7-104.6-104.7zM295.7 467.2c-2 0-4-0.3-6-1.1-23.5-9.1-43.7-24.9-58.2-45.7-14.9-21.3-22.8-46.4-22.8-72.4 0-69.8 56.8-126.6 126.6-126.6 9.2 0 16.6 7.5 16.6 16.6 0 9.2-7.4 16.6-16.6 16.6-51.5 0-93.3 41.8-93.3 93.3 0 38.3 24 73.3 59.7 87.1 8.6 3.3 12.8 13 9.5 21.5-2.5 6.7-8.9 10.7-15.5 10.7z m434.3 248c-9.2 0-16.6-7.4-16.6-16.6 0-71-32.7-136.2-89.8-178.7-7.4-5.5-8.9-15.9-3.4-23.3s15.9-8.9 23.3-3.4c31.3 23.3 57.3 54 75 88.7 18.7 36.3 28.1 75.6 28.1 116.7 0 9.1-7.5 16.6-16.6 16.6z m0 0"
                  fill="#333333"
                ></path>
                <path
                  d="M171.2 645.9c-0.7 0-1.4-0.1-2.1-0.1-9.1-1.1-15.6-9.4-14.4-18.6 5.1-40.8 19.3-78.6 42.2-112.4 22-32.2 51.4-59.4 85.4-78.8 8-4.5 18.2-1.7 22.7 6.3s1.7 18.2-6.3 22.7c-61.9 35.2-102.4 95.8-111.1 166.3-0.9 8.5-8 14.6-16.4 14.6z m80.1 70.1c-9.2 0-16.6-7.5-16.6-16.6 0-34.5 6.8-68 20.2-99.6 12.9-30.5 31.3-57.9 54.9-81.3 23.5-23.5 50.9-42 81.3-54.9 31.6-13.4 65.1-20.2 99.6-20.2 9.2 0 16.6 7.4 16.6 16.6 0 9.2-7.5 16.6-16.6 16.6-122.8 0-222.7 99.9-222.7 222.7 0 9.2-7.5 16.7-16.7 16.7z m0 0"
                  fill="#333333"
                ></path>
                <path
                  d="M769.3 218.3h-40c-2.6 0-4.7-2.1-4.7-4.7s2.1-4.7 4.7-4.7h40c2.6 0 4.7 2.1 4.7 4.7 0.1 2.6-2.1 4.7-4.7 4.7z"
                  fill="#62A8EA"
                ></path>
                <path
                  d="M749.3 237.3c-2.9 0-5.2-2.3-5.2-5.2v-36.9c0-2.9 2.3-5.2 5.2-5.2 2.9 0 5.2 2.3 5.2 5.2v36.9c0 2.8-2.3 5.2-5.2 5.2z"
                  fill="#62A8EA"
                ></path>
              </svg>
            </div>
            <div class="friend-text">家政公司</div>
          </div>
        </div>
        <div class="friend-set">
          <!-- 设置 -->
          <div @click.stop="changeAside()">
            <svg viewBox="0 0 1024 1024" width="24" height="24">
              <path
                d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
                fill="#8C7BFD"
              ></path>
              <path
                d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
                fill="#FFE37B"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="friend-bode" id="body-group">
        <div class="body-left" v-show="showBodyLeft">
          <!-- 聊天 -->
          <div class="aside-list" v-show="type === 1">
            <!-- 聊天 -->
            <div
              style="margin-top: 60px;"
              class="im-user im-user-current"
              v-for="(item, index) in imChats"
              :key="index"
              @click="isActive($event, 'im-active', null, 2, item, 2)"
            >
              <div>
                <n-badge :value="imMessageBadge[item]" :max="99">
                  <n-avatar
                    object-fit="cover"
                    :size="40"
                    :src="imgUrl2"
                  />
                </n-badge>
              </div>
              <div class="im-user-right">
                <div>{{ friends[item].remark }}</div>
                <div class="im-down" v-if="!$common.isEmpty(imMessages[item])">
                  {{
                    imMessages[item][
                      imMessages[item].length - 1
                    ].content.substr(0, 8)
                  }}
                </div>
              </div>
            </div>
          </div>
          <!-- 好友 -->
          <div class="aside-list" v-show="type === 2">
            <div style="margin: 0 30px 0 30px">
              <n-divider dashed>
                共有{{ Object.keys(friends).length }}家家政公司
              </n-divider>
            </div>

            <!-- 好友列表 -->
            <div
              class="im-user"
              v-for="(item, index) in Object.values(friends).reverse()"
              :key="index"
              @click="isActive($event, 'friend-active', null, 4, item)"
            >
              <div>
                <n-avatar
                  object-fit="cover"
                  style="cursor: pointer"
                  @click.stop="openFriendCircle(item.friendId, item.avatar)"
                  :size="40"
                  :src="imgUrl2"
                />
              </div>
              <div class="im-friend">
                {{ item.remark }}
              </div>
            </div>
          </div>
        </div>
        <div class="body-right" v-if="subType === 1">
          <div style="height: 60px; background-color: var(--maxWhite)">
            <span style="line-height: 60px; margin-left: 20px; font-size: 18px"
              >系统消息</span
            >
          </div>
          <div
            style="
              background: var(--midWhite);
              overflow-y: scroll;
              height: calc(100% - 60px);
            "
          >
            <div
              class="msg-one"
              v-for="(item, index) in systemMessages"
              :key="index"
            >
              <!-- 图标 -->
              <div>
                <svg viewBox="0 0 1024 1024" width="50" height="50">
                  <path
                    d="M752.768 955.392H257.92c-112.384 0-203.392-91.008-203.392-203.392V257.152C54.528 144.768 145.536 53.76 257.92 53.76h494.848C865.152 53.76 956.16 144.768 956.16 257.152v494.848c0 112.384-91.008 203.392-203.392 203.392z"
                    fill="#FF4D3C"
                  ></path>
                  <path
                    d="M616.576 765.952H370.56c-67.968 0-123.008-55.04-123.008-123.008V396.8c0-67.968 55.04-123.008 123.008-123.008h166.272c9.984 0 18.176 8.064 18.176 18.176 0 9.984-8.064 18.176-18.176 18.176H370.56c-47.872 0-86.656 38.784-86.656 86.656v246.016c0 47.872 38.784 86.656 86.656 86.656h246.016c47.872 0 86.656-38.784 86.656-86.656V469.12c0-9.984 8.064-18.176 18.176-18.176 9.984 0 18.176 8.064 18.176 18.176v173.824c0 67.968-55.04 123.008-123.008 123.008z"
                    fill="#FFFFFF"
                  ></path>
                  <path
                    d="M694.784 312.704m-113.408 0a113.408 113.408 0 1 0 226.816 0 113.408 113.408 0 1 0-226.816 0Z"
                    fill="#FFFFFF"
                  ></path>
                </svg>
              </div>

              <!-- 内容 -->
              <div style="margin-left: 10px">
                <div class="system-date">
                  {{ item.createTime }}
                </div>
                <div class="system-content">
                  {{ item.content }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 聊天 -->
        <chat
          class="body-right"
          v-if="
            subType === 2 &&
            (!$common.isEmpty(currentChatFriendId) ||
              !$common.isEmpty(currentChatGroupId))
          "
          :currentChatFriendId="currentChatFriendId"
          :currentChatGroupId="currentChatGroupId"
          :friends="friends"
          :groups="groups"
          :imageList="imageList"
          :imMessages="imMessages"
          :groupMessages="groupMessages"
          @sendMsg="sendMsg"
          @openFriendCircle="openFriendCircle"
        ></chat>
        <div
          class="body-right"
          v-if="subType === 4 && !$common.isEmpty(currentFriendId)"
        >
          <div style="height: 60px; background-color: var(--maxWhite)">
            <span style="line-height: 60px; margin-left: 20px; font-size: 18px">
              {{ friends[currentFriendId].remark }}
            </span>
          </div>
          <div style="background: var(--midWhite); height: calc(100% - 60px)">
            <div class="myCenter">
              <div class="friend-info">
                <div style="display: flex; align-items: center">
                  <n-avatar
                    object-fit="cover"
                    :size="60"
                    :src="imgUrl2"
                  />

                  <span style="margin: 0 5px 0 15px; font-size: 16px">{{
                    friends[currentFriendId].remark
                  }}</span>
                </div>
              </div>
            </div>

            <n-divider />

            <div class="myCenter sendMsg">
              <n-button @click="sendFriendMessage()" type="info">
                发消息
              </n-button>
            </div>
          </div>
        </div>

        <!-- 群 -->
        <groupInfo
          class="body-right"
          v-if="subType === 5 && !$common.isEmpty(currentGroupId)"
          :groups="groups"
          :currentGroupId="currentGroupId"
          @exitGroup="exitGroup"
          @dissolveGroup="dissolveGroup"
          @changeDataType="changeDataType"
          @sendGroupMessage="sendGroupMessage"
          @changeAvatar="changeAvatar"
        ></groupInfo>

        <!-- 头像修改弹出框 -->
        <n-modal v-model:show="showAvatarDialog">
          <div
            style="
              padding: 40px;
              background: var(--white);
              border-radius: 5px;
              width: 20%;
            "
          >
            <div style="margin: 0 0 25px; text-align: center; font-size: 18px">
              上传图片
            </div>
            <uploadPicture
              :prefix="avatarPrefix"
              @addPicture="submitAvatar"
              :maxSize="1"
              :maxNumber="1"
            ></uploadPicture>
          </div>
        </n-modal>

        <!-- 修改信息 -->
        <n-modal :auto-focus="false" v-model:show="changeModal">
          <div
            style="
              background-color: var(--white);
              padding: 20px;
              border-radius: 5px;
            "
          >
            <div style="text-align: center; font-size: 20px; padding: 20px">
              修改信息
            </div>
            <div>
              <n-input
                v-model:value="changeData"
                maxlength="30"
                show-count
                clearable
              />
            </div>
            <div class="myCenter" style="margin-top: 30px">
              <n-button @click="submitChange()" type="info"> 提交 </n-button>
            </div>
          </div>
        </n-modal>
      </div>
    </div>

    <div id="outerImg">
      <div id="innerImg" style="position: absolute">
        <img id="bigImg" src="" />
      </div>
    </div>
  </div>
</template>

<script>
import Im from '../utils/im'
import { useStore } from 'vuex'
import imgUrl2 from '../../static/tou2.jpg'
import { useDialog } from 'naive-ui'

import {
  nextTick,
  reactive,
  getCurrentInstance,
  onMounted,
  onBeforeUnmount,
  watchEffect,
  toRefs
} from 'vue'

import { ElMessage } from 'element-plus'

import bindEmail from '../hooks/bindEmail'
import friendCircle from '../hooks/friendCircle'
import friend from '../hooks/friend'
import group from '../hooks/group'
import imUtil from '../hooks/imUtil'
import changeData from '../hooks/changeData'

import proButton from './common/proButton'
import treeHole from './common/treeHole'
import commentBox from './common/commentBox'
import uploadPicture from './common/uploadPicture'
import chat from './common/chat'
import groupInfo from './common/groupInfo'
import { composeRefs } from 'element-plus/es/utils'

export default {
  components: {
    proButton,
    treeHole,
    commentBox,
    uploadPicture,
    chat,
    groupInfo
  },

  setup (props, context) {
    const globalProperties =
      getCurrentInstance().appContext.config.globalProperties
    const $common = globalProperties.$common
    const $http = globalProperties.$http
    const $constant = globalProperties.$constant
    const store = useStore()
    const dialog = useDialog()
    const role = localStorage.getItem("role")

    const {
      bindEmailData,
      getCode,
      submitDialog
    } = bindEmail()
    const {
      friendCircleData,
      launch,
      openFriendCircle,
      deleteTreeHole,
      submitWeiYan,
      pageWeiYan,
      cleanFriendCircle,
      addFriend
    } = friendCircle()
    const {
      friendData,
      getImFriend,
      removeFriend,
      getFriendRequests,
      changeFriendStatus
    } = friend()
    const {
      groupData,
      addGroupTopic,
      exitGroup,
      dissolveGroup
    } = group()
    const {
      imUtilData,
      changeAside,
      mobileRight,
      getSystemMessages,
      hiddenBodyLeft,
      imgShow,
      getImageList,
      parseMessage
    } = imUtil()
    const {
      changeDataData,
      changeAvatar,
      changeDataType,
      submitAvatar,
      submitChange
    } = changeData(friendData, groupData)

    const data = reactive({
      // 消息列表
      imMessages: {},
      // 消息标记
      imMessageBadge: {},
      // 聊天列表
      imChats: [],
      // 当前聊天信息
      currentChatFriendId: null,
      // 群消息列表
      groupMessages: {},
      // 群消息标记
      groupMessageBadge: {},
      // 群聊天列表
      groupChats: [],
      // 当前群聊天信息
      currentChatGroupId: null,

      type: 1,
      subType: 1
    })

    let im

    if (!$common.isEmpty(store.state.currentUser)) {
      getFriendAndGroup()
      if (localStorage.getItem('friendId') !== null && localStorage.getItem('friendId') !== 'undefined') {
        friendData.currentChatFriendId = localStorage.getItem('friendId')
        console.log('data.currentChatFriendId:' + friendData.currentChatFriendId)
        getFriendMessage()
      }
    }

    async function getFriendMessage () {
      for (let i = 0; i < data.imChats.length; i++) {
        if (data.imChats[i] === friendData.currentChatFriendId) {
          // splice(i,1)表示删除imchats中index为i的元素
          data.imChats.splice(i, 1)
        }
      }
      // 在index为0的位置增加一个元素
      data.imChats.splice(0, 0, friendData.currentChatFriendId)
      console.log('执行-1')
      // await nextTick()
      // console.log('执行0')
      // // 跳转到聊天列表
      // isActive(document.getElementById('chat'), 'aside-active', 1)
      // // 给0的位置加入class
      //
      // isActive(
      //   document.getElementsByClassName('im-user-current')[0],
      //   'im-active',
      //   null,
      //   2,
      //   friendData.currentFriendId,
      //   2
      // )
      // 获取与该用户的聊天记录

      console.log(friendData.currentChatFriendId)
      getMessages(friendData.currentChatFriendId)
    }

    async function getFriendAndGroup () {
      await getImFriend()
      // await getImGroup()
      await nextTick()
      getIm()
      if (role == 1) {
        friendData.currentFriendId = localStorage.getItem("friendId")
        await sendFriendMessage()
      }
    }

    function getIm () {
      im = new Im()
      im.initWs()
      im.tio.ws.onmessage = function (event) {
        const message = JSON.parse(event.data)
        message.content = parseMessage(message.content)
        // 如果是私聊
        if (message.messageType === 1) {
          // 如果消息的发送人为当前用户且发送对象为当前用户的朋友
          if (
            message.fromId === store.state.currentUser.id &&
            friendData.friends[message.toId] !== null &&
            friendData.friends[message.toId] !== undefined
          ) {
            // 如果消息的接收者不为空
            if (
              data.imMessages[message.toId] === null ||
              data.imMessages[message.toId] === undefined
            ) {
              // 则将该消息列表放在第一个
              for (let i = 0; i < data.imChats.length; i++) {
                if (data.imChats[i] === message.toId) {
                  data.imChats.splice(i, 1)
                }
              }
              data.imChats.splice(0, 0, message.toId)

              data.imMessages[message.toId] = []
            }
            // 将消息发给发immessage[toid]中
            data.imMessages[message.toId].push(message)
            // 否则则说明当前用户为消息的接收者
          } else if (
            message.fromId !== store.state.currentUser.id &&
            friendData.friends[message.fromId] !== null &&
            friendData.friends[message.fromId] !== undefined
          ) {
            // 消息的发送者不为空
            if (
              data.imMessages[message.fromId] === null ||
              data.imMessages[message.fromId] === undefined
            ) {
              // 将消息发送者的聊天框放在顶部
              for (let i = 0; i < data.imChats.length; i++) {
                if (data.imChats[i] === message.fromId) {
                  data.imChats.splice(i, 1)
                }
              }
              data.imChats.splice(0, 0, message.fromId)

              data.imMessages[message.fromId] = []
            }
            data.imMessages[message.fromId].push(message)

            if (
              data.subType !== 2 ||
              data.currentChatFriendId !== message.fromId
            ) {
              if (
                data.imMessageBadge[message.fromId] === null ||
                data.imMessageBadge[message.fromId] === undefined
              ) {
                data.imMessageBadge[message.fromId] = 1
              } else {
                data.imMessageBadge[message.fromId] =
                  data.imMessageBadge[message.fromId] + 1
              }
            }
          }

          nextTick(() => {
            const msgContainer =
              document.getElementsByClassName('msg-container')
            if (msgContainer && msgContainer.length > 0) {
              msgContainer[0].scrollTop = msgContainer[0].scrollHeight
            }
            imgShow()
          })
        }
        // else if (message.messageType === 2 && (groupData.groups[message.groupId] !== null && groupData.groups[message.groupId] !== undefined)) {
        //   if (data.groupMessages[message.groupId] === null || data.groupMessages[message.groupId] === undefined) {
        //     for (let i = 0; i < data.groupChats.length; i++) {
        //       if (data.groupChats[i] === message.groupId) {
        //         data.groupChats.splice(i, 1)
        //       }
        //     }
        //     data.groupChats.splice(0, 0, message.groupId)

        //     data.groupMessages[message.groupId] = []
        //   }
        //   data.groupMessages[message.groupId].push(message)

        //   if ((data.subType !== 2 || data.currentChatGroupId !== message.groupId) && message.fromId !== store.state.currentUser.id) {
        //     if (data.groupMessageBadge[message.groupId] === null || data.groupMessageBadge[message.groupId] === undefined) {
        //       data.groupMessageBadge[message.groupId] = 1
        //     } else {
        //       data.groupMessageBadge[message.groupId] = data.groupMessageBadge[message.groupId] + 1
        //     }
        //   }

        //   nextTick(() => {
        //     const msgContainer = document.getElementsByClassName('msg-container')
        //     if (msgContainer && msgContainer.length > 0) {
        //       msgContainer[0].scrollTop = msgContainer[0].scrollHeight
        //     }
        //     imgShow()
        //   })
        // }
      }
    }

    function sendMsg (msg, callback) {
      const success = im.sendMsg(msg)
      callback(success)
    }

    function isActive (e, className, type, subType, current, imType) {
      if (!$common.isEmpty(type)) {
        data.type = type
        const actives = ['im-active', 'friend-active', 'im-group']
        for (const activeClass of actives) {
          for (const tab of document.getElementsByClassName(activeClass)) {
            tab.classList.remove(activeClass)
          }
        }
      }

      if (!$common.isEmpty(subType)) {
        data.subType = subType
        if (subType === 4 && !$common.isEmpty(current)) {
          friendData.currentFriendId = current.friendId
        }
        if (subType === 5 && !$common.isEmpty(current)) {
          groupData.currentGroupId = current.id
        }

        if (
          subType === 2 &&
          !$common.isEmpty(current) &&
          !$common.isEmpty(imType)
        ) {
          if (imType === 1) {
            data.currentChatFriendId = null
            data.currentChatGroupId = current
            data.groupMessageBadge[current] = 0
          } else if (imType === 2) {
            data.currentChatGroupId = null
            data.currentChatFriendId = current
            data.imMessageBadge[current] = 0
          }
        }
        nextTick(() => {
          const msgContainer = document.getElementsByClassName('msg-container')
          if (msgContainer && msgContainer.length > 0) {
            msgContainer[0].scrollTop = msgContainer[0].scrollHeight
          }
          imgShow()
          mobileRight()
          hiddenBodyLeft()
        })
      }

      for (const tab of document.getElementsByClassName(className)) {
        tab.classList.remove(className)
      }

      if (e instanceof HTMLElement) {
        e.classList.add(className)
      } else {
        const node = e.currentTarget
        node.classList.add(className)
      }
    }

    async function sendFriendMessage () {
      // 遍历imchats列表将原有的friendData删除，并在顶部加入（先删后加）
      for (let i = 0; i < data.imChats.length; i++) {
        if (data.imChats[i] === friendData.currentFriendId) {
          // splice(i,1)表示删除imchats中index为i的元素
          data.imChats.splice(i, 1)
        }
      }
      // 在index为0的位置增加一个元素
      data.imChats.splice(0, 0, friendData.currentFriendId)
      await nextTick()
      // 跳转到聊天列表
      isActive(document.getElementById('chat'), 'aside-active', 1)
      // 给0的位置加入class
      isActive(
        document.getElementsByClassName('im-user-current')[0],
        'im-active',
        null,
        2,
        friendData.currentFriendId,
        2
      )
      // 获取与该用户的聊天记录
      getMessages(friendData.currentFriendId)
    }

    async function sendGroupMessage () {
      for (let i = 0; i < data.groupChats.length; i++) {
        if (data.groupChats[i] === groupData.currentGroupId) {
          data.groupChats.splice(i, 1)
        }
      }
      data.groupChats.splice(0, 0, groupData.currentGroupId)
      await nextTick()
      isActive(document.getElementById('chat'), 'aside-active', 1)
      isActive(
        document.getElementsByClassName('im-group-current')[0],
        'im-active',
        null,
        2,
        groupData.currentGroupId,
        1
      )
      getGroupMessages(groupData.currentGroupId)
      if (groupData.groups[groupData.currentGroupId].groupType === 2) {
        addGroupTopic()
      }
    }

    function getMessages (friendId, current = 1, size = 100) {
      console.log(data.imMessages.hasOwnProperty(friendId))
      if (!data.imMessages.hasOwnProperty(friendId)) {
        $http
          .get($constant.messageURL + '/imChatUserMessage/listFriendMessage', {
            friendId: friendId,
            current: current,
            size: size
          })
          .then((res) => {
            if (
              !$common.isEmpty(res.data) &&
              !$common.isEmpty(res.data.records)
            ) {
              res.data.records.forEach((message) => {
                message.content = parseMessage(message.content)
              })
              data.imMessages[friendId] = res.data.records
            } else {
              data.imMessages[friendId] = []
            }
            nextTick(() => {
              const msgContainer =
                document.getElementsByClassName('msg-container')
              if (msgContainer && msgContainer.length > 0) {
                msgContainer[0].scrollTop = msgContainer[0].scrollHeight
              }
              imgShow()
            })
          })
          .catch((error) => {
            ElMessage({
              message: error.message,
              type: 'error'
            })
          })
      }
    }

    // function getGroupMessages (groupId, current = 1, size = 100) {
    //   if (!data.groupMessages.hasOwnProperty(groupId)) {
    //     $http.get($constant.baseURL + '/imChatUserGroupMessage/listGroupMessage', {
    //       groupId: groupId,
    //       current: current,
    //       size: size
    //     })
    //       .then((res) => {
    //         if (!$common.isEmpty(res.data) && !$common.isEmpty(res.data.records)) {
    //           res.data.records.forEach(message => {
    //             message.content = parseMessage(message.content)
    //           })
    //           data.groupMessages[groupId] = res.data.records
    //         } else {
    //           data.groupMessages[groupId] = []
    //         }
    //         nextTick(() => {
    //           const msgContainer = document.getElementsByClassName('msg-container')
    //           if (msgContainer && msgContainer.length > 0) {
    //             msgContainer[0].scrollTop = msgContainer[0].scrollHeight
    //           }
    //           imgShow()
    //         })
    //       })
    //       .catch((error) => {
    //         ElMessage({
    //           message: error.message,
    //           type: 'error'
    //         })
    //       })
    //   }
    // }

    return {
      imgUrl2,
      ...toRefs(data),
      ...toRefs(bindEmailData),
      ...toRefs(friendCircleData),
      ...toRefs(friendData),
      ...toRefs(groupData),
      ...toRefs(imUtilData),
      ...toRefs(changeDataData),
      isActive,
      sendMsg,
      role,
      submitAvatar,
      changeFriendStatus,
      submitChange,
      removeFriend,
      sendFriendMessage,
      changeDataType,
      changeAvatar,
      sendGroupMessage,
      changeAside,
      openFriendCircle,
      launch,
      deleteTreeHole,
      submitWeiYan,
      pageWeiYan,
      cleanFriendCircle,
      addFriend,
      getCode,
      submitDialog,
      exitGroup,
      dissolveGroup
    }
  }
}
</script>

<style scoped>
.friend-wrap {
  background: var(--imBackground) no-repeat center;
  background-size: 300% 300%;
  animation: gradientBG 100s ease infinite;
  width: 100vw;
  height: 100vh;
}

.friend-box {
  display: flex;
  background-color: var(--white);
  border-radius: 10px;
  position: absolute;
  width: 70vw;
  max-width: 1000px;
  height: 80vh;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
}

.friend-aside {
  width: 60px;
  border-right: 1px solid var(--maxLightGray);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.friend-bode {
  flex: 1;
  display: flex;
}

.body-left {
  width: 260px;
  box-shadow: 3px 0 6px var(--maxLightGray);
}

.body-right {
  flex: 1;
  position: relative;
}

.user-thumb {
  width: 36px;
  height: 36px;
  margin-top: 15px;
  margin-left: 12px;
  cursor: pointer;
}

.friend-chat {
  margin-top: 25px;
  text-align: center;
  cursor: pointer;
}

.friend-text {
  font-size: 13px;
}

.friend-set {
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
}

.im-input {
  margin: 13px;
  width: 240px;
}

.im-user {
  display: flex;
  padding: 10px;
  cursor: pointer;
  height: 60px;
  box-sizing: border-box;
}

.im-user-group {
  display: flex;
  padding: 10px;
  cursor: pointer;
  height: 65px;
  box-sizing: border-box;
}

.im-active,
.friend-active,
.im-group {
  background: var(--imBG);
}

.im-user-right {
  flex: 1;
  margin-left: 20px;
}

.aside-list {
  overflow-y: scroll;
  height: calc(100% - 60px);
}

.im-down {
  margin-top: 3px;
  font-size: 12px;
  color: var(--greyFont);
}

.aside-active {
  color: var(--blue);
  font-weight: 800;
}

.im-friend {
  margin-left: 20px;
  align-self: center;
  font-size: 15px;
}

.body-left >>> .n-divider .n-divider__title {
  color: var(--greyFont);
  font-size: 12px;
  letter-spacing: 2px;
}

.group-tag {
  border-radius: 2px;
  padding: 2px;
  background: var(--themeBackground);
  color: var(--white);
  margin-right: 12px;
}

.aside-list::-webkit-scrollbar {
  display: none;
}

.msg-one {
  margin: 15px 20px;
  display: flex;
  align-items: flex-start;
}

/* 滚动条 */
.friend-box ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.friend-box ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--lowGray);
}

.sendMsg .n-button {
  height: 35px;
  padding: 15px 25px;
}

.system-date {
  font-size: 12px;
  color: var(--greyFont);
  margin-bottom: 5px;
}

.system-content {
  background-color: var(--messageColor);
  border-radius: 4px;
  max-width: 80%;
  padding: 5px 10px;
  line-height: 25px;
  word-break: break-all;
  color: var(--black);
}

.friend-request {
  background: var(--midWhite);
  overflow-y: scroll;
  height: calc(100% - 60px);
}

.request-status {
  font-size: 16px;
  color: var(--greyFont);
  flex: 1;
  display: flex;
  justify-content: right;
  align-items: center;
}

.friend-label {
  color: var(--greyFont);
  margin-right: 30px;
}

.friend-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 65%;
  padding-top: 50px;
}

.body-right .n-card.n-card--bordered {
  border: none;
}

#outerImg {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
  width: 100%;
  height: 100%;
  display: none;
}

.mobile-right::before {
  content: "👈";
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 40px;
  color: var(--white);
  top: 0;
  left: 0;
  background: var(--maxGreyFont);
  z-index: 100;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  height: 35px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.treeHole-wrap {
  width: 800px;
  height: calc(100vh - 100px);
  overflow-y: scroll;
}

.treeHole-wrap::-webkit-scrollbar-thumb {
  background-color: var(--lowGray);
  border-radius: 5px;
}

.treeHole-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.weiyan-edit {
  width: 350px;
  background-color: var(--background);
  border-radius: 10px;
  padding: 20px;
}

.email-wrap {
  padding: 20px;
  background: var(--white);
  border-radius: 10px;
  transition: all 1s ease;
}

.email-title {
  line-height: 30px;
  font-size: 24px;
  margin-bottom: 15px;
}

@media screen and (max-width: 1200px) {
  .friend-box {
    width: 95vw;
    height: 95vh;
  }
}

@media screen and (max-width: 850px) {
  .friend-box {
    width: 100vw;
    height: 100vh;
    border-radius: unset;
  }

  .friend-bode {
    max-width: calc(100vw - 60px);
  }

  .body-right {
    max-width: calc(100vw - 60px);
  }

  .treeHole-wrap {
    width: calc(100vw - 40px);
  }
}

@media screen and (max-width: 400px) {
  .msg-one {
    margin: 15px 10px;
  }

  .friend-model {
    width: 90% !important;
  }
}
</style>
